<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>隔行变色</title>
     <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css'>
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
</head>
<body>
     <pre>
        <code style='max-height: 400px;'>
            let ulNode = document.querySelector('ul')
            let liNodeList = document.querySelectorAll('li')

            function draw(){
                for(var i = 0;i < liNodeList.length; i++) {
                    i % 2 == 0 ? liNodeList[i].style.background = 'red' : liNodeList[i].style.background = '#ccc'
                }
            }
            draw()    
        </code>
     </pre>
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
     </ul>
     <script> hljs.highlightAll(); </script>
     <script>
            let ulNode = document.querySelector('ul')
            let liNodeList = document.querySelectorAll('li')

            function draw(){
                for(var i = 0;i < liNodeList.length; i++) {
                    i % 2 == 0 ? liNodeList[i].style.background = '#ececec' : liNodeList[i].style.background = '#ccc'
                }
            }
            draw()
     </script>
</body>
</html>